<m-api-data-table
  [dataSource]="dataSource"
  [selection]="selection"
  [searchControl]="searchControl"
  #tableRef
>
  <ng-container mDataTableColumn header="名称">
    <ng-template let-name="name">
      <td>{{ name }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="架构">
    <ng-template let-architecture="architecture">
      <td>{{ architecture }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="操作">
    <ng-template let-id="software_id" let-name="name" let-soft let-area_id="area_id">
      <td>
        <button mat-icon-button [matMenuTriggerFor]="editMenuRef">
          <mat-icon>edit</mat-icon>
        </button>
        <mat-menu #editMenuRef>
          <button mat-menu-item [mDetailRouterLink]="{ id: id, type: 'software', name: name, area_id: area_id }">
            查看软件信息
          </button>
          <button mat-menu-item [style.color]="'red'" (click)="tableRef.refresh(deleteSoft(soft))">
            移除软件
          </button>
        </mat-menu>
      </td>
    </ng-template>
  </ng-container>

  <button class="btn btn-secondary btn-sm mr-3" (click)="tableRef.selectAll()">全选</button>
  <button class="btn btn-secondary btn-sm" [matMenuTriggerFor]="editMenuRef">
    批量操作
  </button>
  <mat-menu #editMenuRef>
    <button mat-menu-item [style.color]="'red'" (click)="tableRef.refresh(deleteSoft())">
      移除软件
    </button>
  </mat-menu>
</m-api-data-table>
